<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车服务 - 个人信息</title>
    <link rel="stylesheet" href="/car_rental/u/css/styles.css">
    <link rel="stylesheet" href="/car_rental/u/css/pro.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<header>
    <h1>租车服务</h1>
    <nav>
        <ul>
            <li><a href="../index.jsp">首页</a></li>
            <li><a href="rent.jsp">租车</a></li>
            <li><a href="profile.jsp" class="active">个人信息</a></li>
            <li><a href="orders.jsp">订单</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="profile">
        <h2>个人信息</h2>
        <div class="form">
            <label for="full-username">用户名:</label>
            <input type="text" id="full-username" disabled>
            <label for="full-userpassword">密码:</label>
            <input type="text" id="full-userpassword">
            <label for="full-name">姓名:</label>
            <input type="text" id="full-name">
            <label for="email">邮箱:</label>
            <input type="email" id="email">
            <label for="phone">电话:</label>
            <input type="tel" id="phone">
            <button id="updata_Btn">修改</button>
        </div>
    </section>
</main>

<footer>
    <p>&copy; 2024 租车服务. 版权所有.</p>
</footer>

</body>
<script>
    //获取id
    //获取用户id
    <%--var userId = <%= session.getAttribute("id") %>;--%>
    var userId = ${user.id};
    console.log('用户id'+userId);
    $(function () {
        //初始化个人信息
        showUser(userId);
        // 修改
        $('#updata_Btn').click(function () {
            if (confirm("确定要修改吗？")) {
                updateUser();
            }

        })
    });
    //显示信息
    function showUser(userId) {
        $.get("/car_rental/selectUserServlet", {'id': userId}, function (data) {
            $("#full-username").val(data.username);
            $("#full-userpassword").val(data.password);
            $("#full-name").val(data.name);
            $("#email").val(data.email);
            $("#phone").val(data.phone);
        });
    }

    //修改
    function updateUser() {
        console.log("修改");
        var username = $("#full-username").val();
        var password = $("#full-userpassword").val();
        var name = $("#full-name").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        console.log(username, password, name, email, phone);
        $.get("/car_rental/updateUserServlet", {
            'id': userId,
            'username': username,
            'password': password,
            'name': name,
            'email': email,
            'phone': phone
        }, function (data) {
            console.log(data);
            showUser(userId);
        });
    }
</script>
</html>